﻿<%@ Page Language="C#" AutoEventWireup="true" Buffer="false" CodeBehind="DesktopConfigForUser.aspx.cs" Inherits="ZX.WebApp.DeskTop.Form.DesktopConfigForUser" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <link href="styles/css.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/CustomFunction.js" type="text/javascript"></script>
    <script src="Scripts/json2.js" type="text/javascript"></script>
    <script src="../../KM/FullTextSearch/Script/CommonJS.js" type="text/javascript"></script>
    <link href="../../Styles/deskTopStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <!--主体 开始-->
        <div class="custom_clum_box">
            <!--左边框-->
            <div class="custom_clum_left_small"></div>
            
            <div class="custom_clum_center_small" style="text-align:center; display:none;" >
                <div id="float" style="text-align:center;">
                    <p><input type="button" ct="top" id="btnTop" value="置顶" /></p>
                    <p><input type="button" ct="up" id="btnMoveUp" value="上移" /></p>
             <%--       <p><input type="button" ct="left" id="btnMoveLeft" value="←" /></p>
                    <p><input type="button" ct="right" id="btnMoveRight" value="→" /></p>--%>
                    <p><input type="button" ct="down" id="btnMoveDown" value="下移" /></p>
                    <p><input type="button" ct="bottom" id="btnBottom" value="置底" /></p>
                    <p><input type="checkbox" id="selectAll" value="全选" /></p>
                    <p><input type="button" id="btnSave" value="保存" /></p>
                </div>
            </div>
            <!--右边框-->
            <div class="custom_clum_right_small"></div>
        </div>
        <!--主体 结束-->
</body>
</html>

<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<%--<script type="text/javascript" src="Scripts/jquery.sortable.js"></script>--%>
<script type="text/javascript">

    var custom_clum_left = $(".custom_clum_left"); //左边容器
    var custom_clum_right = $(".custom_clum_right"); //右边容器

    //  ID： clum_tools_reload_+ id  刷新按钮
    var refreshBtn_Html = "<li class='ul_li_buttons refresh' style='width:25px;'><img class='clum_tools_reload' src='styles/images/refresh.png' /></li>";
    //  ID：clum_tools_more_+id      更多按钮
    var moreBtn_Html = "<li class='ul_li_buttons more' style='width:45px;color:#6CA6CD;'><a class='clum_tools_more' >更多..<a/></li>";

    $(function () {
        custom_clum_left = $(".custom_clum_left_small");
        custom_clum_right = $(".custom_clum_right_small");
        custom_clum_left.html(""); custom_clum_right.html("");

        loadData();

        //动态注册tab按钮事件   Tab按钮
        $(".tab").live("click", function () {
            changeTab($(this));
        });

        $(".class_radio").live("click", function () {
            var radio = $(this).find(".class_radio");
            $(".class_radio").attr("mouseup", "false");
            radio.attr("checked", "true");
        });

        $("#btnTop,#btnBottom,#btnMoveUp,#btnMoveDown,#btnMoveLeft,#btnMoveRight").click(function () {
            var event = $(this);
            var radio = $("input:radio[name='selectRadio']:checked");
            var p = radio.parent().parent().parent().parent().parent().parent().parent();
            var title = event.attr("ct");
            switch (title) {
                case "top":
                    c_top(p);
                    break;
                case "bottom":
                    c_bottom(p);
                    break;
                case "left":
                    c_left(p);
                    break;
                case "right":
                    c_right(p);
                    break;
                case "up":
                    c_pre(p);
                    break;
                case "down":
                    c_next(p);
                    break;
            }
        });

        $("#selectAll").click(function () {
            var ck = $(this).attr("checked");
            if (ck) $("input:checkbox[name='selectCheckbox']").attr("checked", ck);
            else $("input:checkbox[name='selectCheckbox']").removeAttr("checked");
        });

        $("input:checkbox[name='selectCheckbox']").live("click", function () {
            var ckObj = $(this);
            var p = ckObj.parent().parent().parent().parent().parent().parent();
            var ck = ckObj.attr("checked");
            if (ck) {
                c_top(p);
            }
            else {
                ckObj.removeAttr("checked");
                c_bottom(p);
            }
        });

        $("#btnSave").click(function () {
            saveData();
        });
    });

    var fixedDiv = function () {
        var floatObj = $("#float");
        var position = floatObj.position();
        var left = position.left;
        var top = position.top;
        var w = floatObj.width()/4;
        floatObj.css({ "position": "fixed", "left": left+w-2, "top": top });
    };

    //上移
    var c_pre = function (o) {
        var o = $(o).parent();
        if (o.prev().length > 0) {
            var tmp = o.clone();
            var oo = o.prev();
            o.remove();
            oo.before(tmp);
        }
    };
    //下移
    var c_next = function (o) {
        var o = $(o).parent();
        if (o.next().length > 0) {
            var tmp = o.clone();
            var oo = o.next();
            o.remove();
            oo.after(tmp);
        }
    };
    //左移
    var c_left = function (o) {
        var o = $(o).parent();
        var tmp = o.clone();
        o.remove();
        custom_clum_left.append(tmp);
    }
    //右移
    var c_right = function (o) {
        var o = $(o).parent();
        var tmp = o.clone();
        o.remove();
        custom_clum_right.append(tmp);
    }
    //置顶
    var c_top = function (o) {
        var o = $(o).parent();
        if (o.prev().length > 0) {
            var tmp = o.clone();
            var oo = o.parent().find(".list_panel_small:first");
            o.remove();
            oo.before(tmp);
        }
    };
    //置底
    var c_bottom = function (o) {
        var o = $(o).parent();
        if (o.next().length > 0) {
            var tmp = o.clone();
            var oo = o.parent().find(".list_panel_small:last");
            o.remove();
            oo.after(tmp);
        }
    };
    //保存
    var saveData = function () {
        var leftObj = custom_clum_left.find("input:checkbox[name='selectCheckbox']:checked");
        var rightObj = custom_clum_right.find("input:checkbox[name='selectCheckbox']:checked");

        var leftData = [];
        $.each(leftObj, function (i, m) {
            var mObj = $(m);
            var sort = Number(i) + Number(1);
            var id = mObj.attr("id");
            var temp = { id: id, sort: sort };
            leftData.push(temp);
        });

        var rightData = [];
        $.each(rightObj, function (j, mm) {
            var mObj = $(mm);
            var sort = Number(j) + Number(1);
            var id = mObj.attr("id");
            var temp = { id: id, sort: sort };
            rightData.push(temp);
        });

        leftData = JSON2.stringify(leftData);
        rightData = JSON2.stringify(rightData);

        $.post("DesktopConfigForUser.aspx?Action=Save&leftData=" + leftData + "&rightData=" + rightData + "&r=" + Math.random(), function (data) {
            if (data) alert("保存成功!");
            else alert("保存失败");
        });
    };


    //tab切换事件，更改tab焦点
    var changeTab = function (event) {
        event.parent().find("li").each(function () {
            $(this).removeClass("ul_li_active");
        })
        event.addClass("ul_li_active");
    };

    var loadData = function () {
        $.getJSON("DesktopConfigForUser.aspx?Action=LoadData&r=" + Math.random(), function (data) {
            if (data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    var m = data[i];
                    var region = m.Region;
                    createLeftPanel(m, region);
                }
                // $('.custom_clum_left_small').sortable();
                $(".custom_clum_center_small").show();
                fixedDiv();
            }
        });
    };

    //动态创建桌面
    var createLeftPanel = function (data, region) {
        var deskTopModel = "";

        deskTopModel = "<div class='list_panel_small'>" +
            "<table border='0' class='table_move' cellpadding='0' cellspacing='0' style='width:100%;height:60px;'>     " +
            "    <tr>                                                                               " +
            "        <td valign='top'><img src='styles/images/load_bk_left_small.png' /></td>       " +
            "        <td valign='top' class='clum_big_center_small'>                                " +
            "            <div class='load_title'>                                                   " +
            "                <span class='paneltitle' style='float:left;'></span>                   " +
            "                <div class='clum_tools'>                                               " +
            "                    <ul><input type='radio' class='class_radio' name='selectRadio' /></ul>" +
            "                </div>                                                                 " +
            "            </div>                                                                     " +
            "            <div class='clum_content_small'>                                           " +
            "               <div class='clum_content_div_small'></div>                              " +
            "            </div>                                                                     " +
            "        </td>                                                                          " +
            "        <td valign='top'><img src='styles/images/load_bk_right_small.png' /></td>      " +
            "    </tr>                                                                              " +
            "</table></div>";

        var ck = data.IsChecked;
        var ckStr = "";
        if (ck == "1") ckStr = "checked = 'true'";

        var deskTopModelObj = $(deskTopModel);
        deskTopModelObj.find(".paneltitle").html("<input type='checkbox' name='selectCheckbox' id=" + data.id + " " + ckStr + " />&nbsp;&nbsp;" + data.title)

        var panelObj; //容器对象     
        if (region == null || region == "") region = "center"
        if (region == "center") {
            panelObj = custom_clum_left;
        } else {
            panelObj = custom_clum_right;
        }
        panelObj.append(deskTopModelObj); //容器中添加子容器
    };
</script>